<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">新增配额</span>
    <el-card class="box-card">
        <el-table
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                    >
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column type="index" label="序号" ></el-table-column>
             <el-table-column prop="topicName" label="机构名称" ></el-table-column>
             <el-table-column prop="topicType" label="上级机构" ></el-table-column>
             <el-table-column prop="num4" label="本机构类型" ></el-table-column>
             <el-table-column label="操作">
                <el-link type="primary" style="margin-right: 50px;">查看</el-link>
                <el-link type="primary" @click="dialogVisible = true">配额</el-link>
             </el-table-column>
             </el-table>
    </el-card>
    <el-dialog
          title="新增配额"
          :visible.sync="dialogVisible"
          width="50%"
          >
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
              <el-input v-model="formInline.user" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="年份">
              <el-input :disabled="true" v-model="formInline.user1"></el-input>
            </el-form-item>
            <el-form-item label="课题配额总数量">
              <el-input v-model="formInline.user2" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <!-- button -->
          <el-form  :inline="true">
          <el-button type="primary">选择机构</el-button>
          <el-button type="primary"  @click="dialogVisible=false">复制批次</el-button>
          <el-button type="primary">查看名称</el-button>
          <el-button class="btnred">移除</el-button>
          <el-button class="btnred" @click="dialogVisible2 = true">批量设置名额</el-button>
          </el-form>
          <!-- form -->
          <el-table
                  ref="multipleTable"
                  :data="newpe"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column label="序列号" width="150" type="index"></el-table-column>
             <el-table-column prop="name" label="机构名称" ></el-table-column>
             <el-table-column prop="up" label="上级机构"></el-table-column>
             <el-table-column prop="school" label="本机构类型"></el-table-column>
             <el-table-column prop="quantity" label="配额数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.quantity"></el-input>
              </template>
             </el-table-column>
        </el-table>
          <!--  -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
  title="批量设置名额"
  :visible.sync="dialogVisible2"
  width="30%">
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="设置名额">
    <el-input v-model="form.name" style="width: 200px;"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'
import {getPoticlist,maintainList} from '@/axios/axios-api'
export default {
    data(){
        return {
          dialogVisible: false,
          dialogVisible2: false,
          multipleTable:[],
          form: {
            name:''
          },
            tableData:[],
            formInline:{
          user:'',
          user1:'2023',
          user2:'',
        },
        newpe:[{
          name:'阿萨德基地',
          up:'教育局系统',
          school:'学校教务',
          quantity:''
        },{
          name:'阿萨德基地',
          up:'教育局系统',
          school:'学校教务',
          quantity:''
        },{
          name:'阿萨德基地',
          up:'教育局系统',
          school:'学校教务',
          quantity:''
        },],
        }
    },
    components:{
    Header,
    Nav
  },
  created(){
    this.getPlist()
  },
  methods:{
    // 获取课题列表
    getPlist(){
        getPoticlist().then(res=>{
          console.log(res.rows);
          this.tableData = res.rows
        })
      },
      // 查询二级机构维护人员
    MaintainList(){
      // *配额机构id
      maintainList().then(res=>{
        console.log(res);
      })
    },
    handleSelectionChange(val){
      this.multipleTable = val
    }
  }
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -43%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 16px;
}
</style>